<template>
  <div class="full-container">
    <div class="edit-container">
      <div class="customer-table">
        <b-table
            :data="blackCustomerList"
            class="customer-table"
            :striped="true"
            :narrowed="true"
            :paginated="true"
            :per-page="15">
            <template slot-scope="props">
              <b-table-column field="id" label="序号" width="50" numeric>
                {{ props.row.id }}
              </b-table-column>
              <b-table-column field="name" label="域名">
                {{ props.row.domain }}
              </b-table-column>
              <b-table-column field="email" label="邮箱" email>
                {{ props.row.email }}
              </b-table-column>
              <b-table-column field="phone" label="手机号">
                {{props.row.phone}}
              </b-table-column>
              <b-table-column field="websiteTitle" label="网站标题">
                {{props.row.websiteTitle}}
              </b-table-column>
              <b-table-column field="websiteDescription" label="网站描述">
                {{props.row.websiteDescription}}
              </b-table-column>
              <b-table-column label="黑名单">
                <a class="button is-info" @click="removeOutBlackList(props.row.id)">移出黑名单</a>
              </b-table-column>
            </template>
          </b-table>
      </div>
    </div>
    <!-- loading -->
    <b-loading :is-full-page="isFullPage" :active.sync="isLoading" :can-cancel="false"></b-loading>
  </div>
</template>

<script>
import { getBlackList, removeFromBlackList } from "@/api/customer"
import { getUserId } from "@/util/userInfoStorage"
export default {
  name: "customer-list",
  data() {
    return {
      blackCustomerList: [],
      radio: 1,
      isCardModalActive: false,
      isFullPage: true,
      isLoading: false,
    }
  },
  methods: {
    //移出黑名单
    removeOutBlackList(customerId) {
      this.isLoading = true;
      removeFromBlackList(this.userid,customerId).then(res => {
        this.$toast.open({
          message: '移出黑名单成功',
          type: 'is-success'
        })
        this.isLoading = false;
        this.getBlackCustomerList();
      }).catch(e => {
        this.isLoading = false;
        this.$toast.open({
          message: e.message || '未知错误',
          type: 'is-danger'
        })
      })
    },
    //获取黑名单客户列表
    getBlackCustomerList(){
      this.isLoading = true;
      getBlackList(this.userid,0,20).then(res => {
        this.blackCustomerList = res.data.content;
        this.isLoading = false;
      }).catch(e => {
        this.isLoading = false;
        this.$toast.open({
          message: e.message || '未知错误',
          type: 'is-danger'
        })
      })
    },
    // handleClick(row) {
    //   console.log(row);
    // },
    editCustomer() {
      this.isCardModalActive = true;
    },
    submitCustomerInfo(){
      this.isCardModalActive = false;
    }
  },
  mounted(){
    let userid = getUserId();
    this.userid = userid;
    this.getBlackCustomerList();
  }
}
</script>

<style lang="less" scoped>
.edit-container {
  margin: 20px 20px;
  padding: 40px 40px;
  height: 80vh;
  background-color: #ffffff;
  .settings {
    display: flex;
    justify-content: space-between;
    .left-setting {
      display: flex;
      .form-item {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .right-setting {
      display: flex;
      .button {
        margin-right: 10px;
      }
    }
  }
  .customer-table {
    margin-top: 30px;
  }
}
</style>
